<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="user" value="${sessionScope.user}"/><!DOCTYPE html>
<html>

<head>
    <title>添加用户</title>
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">
    <script src="../../../backstage/js/jquery.min.js"></script>
    <script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>
</head>

<body>
<div class="y-body">
    <form class="layui-form">

        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" required="" lay-verify="username" autocomplete="off" class="layui-input"
                       maxlength="10" >
                <div id="username1" style="color: #FD3F31;display: none;">用户名不能为空</div>
                <div id="username2" style="color: #FD3F31;display: none;">用户名已存在，请重新输入</div>
                <div id="username3" style="color: #43C608;display: none;">用户名合格</div>
            </div>
        </div>

        <!-- 男女性 -->
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>性别
            </label>
            <input type="radio" name="sex" value="男性" title="男性" checked>
            <input type="radio" name="sex" value="女性" title="女性">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class='x-red'>*</span>用户角色
            </label>
            <div class="layui-input-block">
                <select name="article_category_id" id="role">
                    <option value="普通用户">普通用户</option>
                    <option value="会员">会员</option>
                    <option value="管理员">管理员</option>
                    <option value="客服">客服</option>
                </select>
            </div>
           </div>

        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" required="" lay-verify="pass" autocomplete="off" class="layui-input"
                       min="6" >
                <div id="pwd1" style="color: #FD3F31;display: none;">密码不能为空</div>
                <div id="pwd2" style="color: #43C608;display: none;">密码合格</div>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"  autocomplete="off" class="layui-input"
                       min="6" >
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label"> </label>
            <input type="button" id="add" class="layui-btn" lay-filter="add" lay-submit="add" value="添加">  </input>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer'], function() {
        $ = layui.jquery;
        var form = layui.form(),
                layer = layui.layer;



    //失去焦点时，验证用户名是否存在
    $("#username").blur(function(){
        var username = $.trim($("#username").val());
        $.ajax({
            url:"/user/registerUsernameCheck",
            type:"post",
            data:{username:username},
            dataType:"json",
            async:false,
            error: function () {
                console.log("失败");
            },
            success:function(data){
                if(data.result=="用户名不能为空！"){
                    $("#username1").toggle();
                    $("#username2").hide();
                    $("#username3").hide();
                } else if(data.result=="notsuccess") {
                    $("#username2").toggle();
                    $("#username1").hide();
                    $("#username3").hide();
                } else if(data.result=="success"){
                    $("#username3").toggle();
                    $("#username2").hide();
                    $("#username1").hide();
                }
            }
        });
    });

    //失去焦点时，判断是否输入密码
    $("#L_pass").blur(function(){
        var pwd = $.trim($("#L_pass").val());
        if(pwd.length <= 0) {
            $("#pwd1").toggle();
            $("#pwd2").hide();
        } else {
            $("#pwd2").toggle();
            $("#pwd1").hide();
        }
    });
        //失去焦点时，判断密码长度
        $("#L_pass").blur(function(){
            var pwd = $.trim($("#L_pass").val());
            if(pwd.length <= 6) {
                layer.msg('密码至少为6位',{icon:5,time:2000});
            }
        });

    //添加
    $("#add").click(function () {
        var username = $.trim($("#username").val());
        var pwd = $.trim($("#L_pass").val());
        var pwdAgain = $.trim($("#L_repass").val());
        var sex = $.trim($("input:radio:checked").val());
        var role= $.trim($("#role").val());
        $.ajax({
            type: 'POST',
            url: '/userManager/addUser',
            dataType: "json",
            data: {username: username, pwd: pwd, pwdAgain: pwdAgain,sex: sex,role:role},
            error: function () {
                alert("失败");
            },
            success: function (result) {
                if (result.msg == "不能有非空字段！") {
                    alert("不能有非空字段！");

                } else if(result.msg == "两次密码不相同!") {
                    alert("两次密码不相同!");

                }
                else if(result.msg == "注册成功"){
                    alert("添加成功");

                }else if(result.msg == "注册失败"){
                    alert("注册失败");

                }
                location.reload();
            }
        });
    });
    });
</script>
</body>

</html>